
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>城市选择</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-indexed-list.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <style>
        body{
            font-size: 14px;
        }
        header{
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 999;
        }
        .aui-indexed-list{
            top: 77px;
        }
        .aui-searchbar-wrap.fixed{
            /*top: 45px;*/
            position: static;
            background: #fff;
        }
        .aui-searchbar{
            margin: 00px;
            border-radius:0;
        }
        .aui-title{
            line-height: 45px;
            height: 45px;
            background: #fff;
            margin: 0;
        }
        .icon-left-coler{
            z-index: 99;
            height: 45px;
            line-height: 45px;
            position: absolute;
        }

        input[type=search]{
            background: #fff;
            height: 32px;
        }
        ul[class*='City']{
            overflow: hidden;
            padding:0 10px;
            padding-right: 25px;
        }
        .aui-searchbar-wrap{
            height: 32px;
        }
        ul[class*='City'] li{
            width: 30%;
            float: left;
            background: #fff;
            text-align: center;
            border-radius:5px;
            padding:5px 10px;
            margin-bottom: 8px;
            border: 1px solid #ccc;
        }
        ul[class*='City'] li:nth-of-type(3n+2){
            margin:0 5%;
        }
        .aui-badge{
            background: none;
        }
        .cityTitle{
            padding: 10px;
            font-size: 12px;
        }
        .countyCity{
            margin-top: 15px;
        }
        .aui-list-view i.aui-iconfont{
            color: #000;
        }
        .countyShow:before{
            content: "\e6de";
        }
        .countyCity{
            display: none;
        }
        .icon-left-coler{
            padding-left: 10px;
        }
        .aui-badge:before{
            float: right;
        }
        #aui-searchbar-input{
            height: 30px;
        }
        .aui-indexed-list-toast.active{
            color: #fff !important;
        }
        .otherCity .aui-list-view:first-of-type:after{
            border: none;
        }
    </style>
</head>
<body>
<header class=" aui-bar-nav ">
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
    <div class="aui-title aui-border-b">
        选择城市
    </div>

    <div class="aui-searchbar-wrap fixed" id="group-search">
        <div class="aui-searchbar aui-border-radius aui-border-b">
            <i class="aui-iconfont aui-icon-search"></i>
            <div class="aui-searchbar-text">输入首字母</div>
            <div class="aui-searchbar-input">
                <form action="javascript:search();">
                    <input type="text" placeholder="输入首字母" id="aui-searchbar-input">
                </form>
            </div>
            <i class="aui-iconfont aui-icon-roundclosefill" id="aui-searchbar-clear"></i>
        </div>
        <div class="aui-searchbar-cancel aui-text-info" id="aui-searchbar-cancel">取消</div>
    </div>
</header>

<div class="aui-indexed-list">
<div class="otherCity">
    <ul class="aui-list-view" >
        <li class="aui-list-view-cell">
            <a class="">
                当前：广州
                <span class="aui-badge aui-iconfont  aui-icon-unfold" data-type="hide" tapmode onclick="showCounty(this)">选择县区</span>
            </a>
            <ul class="countyCity">
                <li>广州</li>
                <li>深圳</li>
                <li>北京</li>
                <li>广州</li>
                <li>深圳</li>
                <li>北京</li>
                <li>广州</li>
                <li>深圳</li>
                <li>北京</li>
            </ul>
        </li>
    </ul>
    <div class="cityTitle">
        当前定位的城市
    </div>
    <ul class="nowCity">
        <li>广州</li>
    </ul>
    <div class="cityTitle">
        最近访问的城市
    </div>
    <ul class="historyCity">
        <li>广州</li>
        <li>深圳</li>
        <li>北京</li>
    </ul>
    <div class="cityTitle">
        热门城市
    </div>
    <ul class="hotCity">
        <li>广州</li>
        <li>广州</li>
        <li>广州</li>
        <li>广州</li>
        <li>广州</li>
        <li>广州</li>
    </ul>
</div>
    <ul class="aui-list-view aui-indexed-list-view aui-in" id="group-*" data-group="*">

        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-A" data-group="A">A</li>
        <li class="aui-list-view-cell">阿拉善盟</li>
        <li class="aui-list-view-cell">安庆</li>
        <li class="aui-list-view-cell" data-tags="anyang">安阳</li>
        <li class="aui-list-view-cell" data-tags="aba">阿坝藏族羌族自治州</li>
        <li class="aui-list-view-cell" data-tags="anshun">安顺</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-B" data-group="B">B</li>
        <li class="aui-list-view-cell" data-tags="beijing">北京</li>
        <li class="aui-list-view-cell" data-tags="baoding">保定</li>
        <li class="aui-list-view-cell" data-tags="baotou">包头</li>
        <li class="aui-list-view-cell" data-tags="benxi">本溪</li>
        <li class="aui-list-view-cell" data-tags="baishan">白山</li>
        <li class="aui-list-view-cell" data-tags="baicheng">白城</li>
        <li class="aui-list-view-cell" data-tags="haozhou">毫州</li>
        <li class="aui-list-view-cell" data-tags="binzhou">滨州</li>
        <li class="aui-list-view-cell" data-tags="binhai">滨海</li>
        <li class="aui-list-view-cell" data-tags="beihai">北海</li>
        <li class="aui-list-view-cell" data-tags="baise">百色</li>
        <li class="aui-list-view-cell" data-tags="baoshan">保山</li>
        <li class="aui-list-view-cell" data-tags="baoji">宝鸡</li>
        <li class="aui-list-view-cell" data-tags="baiyin">白银</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-C" data-group="C">C</li>
        <li class="aui-list-view-cell" data-tags="chengde">承德</li>
        <li class="aui-list-view-cell" data-tags="cangzhou">沧州</li>
        <li class="aui-list-view-cell" data-tags="chifeng">赤峰</li>
        <li class="aui-list-view-cell" data-tags="chaoyang">朝阳</li>
        <li class="aui-list-view-cell" data-tags="cangzhou">常州</li>
        <li class="aui-list-view-cell" data-tags="chizhou">池州</li>
        <li class="aui-list-view-cell" data-tags="changsha">长沙</li>
        <li class="aui-list-view-cell" data-tags="changde">常德</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-D" data-group="D">D</li>
        <li class="aui-list-view-cell" data-tags="datong">大同</li>
        <li class="aui-list-view-cell" data-tags="dalian">大连</li>
        <li class="aui-list-view-cell" data-tags="daqing">大庆</li>
        <li class="aui-list-view-cell" data-tags="dongying">东营</li>
        <li class="aui-list-view-cell" data-tags="dezhou">德州</li>
        <li class="aui-list-view-cell" data-tags="dongguan">东莞</li>
        <li class="aui-list-view-cell" data-tags="deyang">德阳</li>
        <li class="aui-list-view-cell" data-tags="dingxi">定西</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-E" data-group="E">E</li>
        <li class="aui-list-view-cell" data-tags="eerduosi">鄂尔多斯</li>
        <li class="aui-list-view-cell" data-tags="ezhou">鄂州</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-F" data-group="F">F</li>
        <li class="aui-list-view-cell" data-tags="fushun">抚顺</li>
        <li class="aui-list-view-cell" data-tags="fuxin">阜新</li>
        <li class="aui-list-view-cell" data-tags="fuzhou">福州</li>
        <li class="aui-list-view-cell" data-tags="fuzhou">抚州</li>
        <li class="aui-list-view-cell" data-tags="foshan">佛山</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-G" data-group="G">G</li>
        <li class="aui-list-view-cell" data-tags="fushun">广州</li>
        <li class="aui-list-view-cell" data-tags="fushun">广州</li>
        <li class="aui-list-view-cell" data-tags="fushun">广州</li>
        <li class="aui-list-view-cell" data-tags="fushun">广州</li>
        <li class="aui-list-view-cell" data-tags="fushun">广州</li>
        <li class="aui-list-view-cell" data-tags="fushun">广州</li>
        <li class="aui-list-view-cell" data-tags="fushun">广州</li>
        <li class="aui-list-view-cell" data-tags="fushun">广州</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-H" data-group="H">H</li>
        <li class="aui-list-view-cell" data-tags="fushun">黄山</li>
        <li class="aui-list-view-cell" data-tags="fushun">黄山</li>
        <li class="aui-list-view-cell" data-tags="fushun">黄山</li>
        <li class="aui-list-view-cell" data-tags="fushun">黄山</li>
        <li class="aui-list-view-cell" data-tags="fushun">黄山</li>
        <li class="aui-list-view-cell" data-tags="fushun">黄山</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-I" data-group="I">I</li>
        <li class="aui-list-view-cell" data-tags="fushun">I</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-J" data-group="J">J</li>
        <li class="aui-list-view-cell" data-tags="fushun">江门</li>
        <li class="aui-list-view-cell" data-tags="fushun">江门</li>
        <li class="aui-list-view-cell" data-tags="fushun">江门</li>
        <li class="aui-list-view-cell" data-tags="fushun">江门</li>
        <li class="aui-list-view-cell" data-tags="fushun">江门</li>
        <li class="aui-list-view-cell" data-tags="fushun">江门</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-K" data-group="K">K</li>
        <li class="aui-list-view-cell" data-tags="fushun">昆明</li>
        <li class="aui-list-view-cell" data-tags="fushun">昆明</li>
        <li class="aui-list-view-cell" data-tags="fushun">昆明</li>
        <li class="aui-list-view-cell" data-tags="fushun">昆明</li>
        <li class="aui-list-view-cell" data-tags="fushun">昆明</li>
        <li class="aui-list-view-cell" data-tags="fushun">昆明</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-O" data-group="O">O</li>
        <li class="aui-list-view-cell" data-tags="fushun">偶们</li>
        <li class="aui-list-view-cell" data-tags="fushun">偶们</li>
        <li class="aui-list-view-cell" data-tags="fushun">偶们</li>
        <li class="aui-list-view-cell" data-tags="fushun">偶们</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-P" data-group="P">P</li>
        <li class="aui-list-view-cell" data-tags="fushun">潘阳</li>
        <li class="aui-list-view-cell" data-tags="fushun">潘阳</li>
        <li class="aui-list-view-cell" data-tags="fushun">潘阳</li>
        <li class="aui-list-view-cell" data-tags="fushun">潘阳</li>
        <li class="aui-list-view-cell" data-tags="fushun">潘阳</li>
        <li class="aui-list-view-cell" data-tags="fushun">潘阳</li>
        <li class="aui-list-view-cell" data-tags="fushun">潘阳</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-T" data-group="T">T</li>
        <li class="aui-list-view-cell" data-tags="fushun">天津</li>
        <li class="aui-list-view-cell" data-tags="fushun">天津</li>
        <li class="aui-list-view-cell" data-tags="fushun">天津</li>
        <li class="aui-list-view-cell" data-tags="fushun">天津</li>
        <li class="aui-list-view-cell" data-tags="fushun">天津</li>
        <li class="aui-list-view-cell" data-tags="fushun">天津</li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-#" data-group="#">#</li>
        <li class="aui-list-view-cell"> ^.^</li>
        <li class="aui-list-view-cell">!!*_*!!</li>
    </ul>
</div>
<div class="aui-indexed-list-toast"></div>
<div class="aui-indexed-list-bar">
    <a>
        <i class="aui-iconfont aui-icon-search" data-value="search"></i>
    </a>
    <a>
        <i class="aui-iconfont aui-icon-favorfill" data-value="*"></i>
    </a>
    <a data-value="A">A</a>
    <a data-value="B">B</a>
    <a data-value="C">C</a>
    <a data-value="D">D</a>
    <a data-value="E">E</a>
    <a data-value="F">F</a>
    <a data-value="G">G</a>
    <a data-value="H">H</a>
    <a data-value="I">I</a>
    <a data-value="J">J</a>
    <a data-value="K">K</a>
    <a data-value="L">L</a>
    <a data-value="M">M</a>
    <a data-value="N">N</a>
    <a data-value="O">O</a>
    <a data-value="P">P</a>
    <a data-value="Q">Q</a>
    <a data-value="R">R</a>
    <a data-value="S">S</a>
    <a data-value="T">T</a>
    <a data-value="U">U</a>
    <a data-value="V">V</a>
    <a data-value="W">W</a>
    <a data-value="X">X</a>
    <a data-value="Y">Y</a>
    <a data-value="Z">Z</a>
    <a data-value="#">#</a>
</div>



</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/aui-tap.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/aui-indexed-list.js" ></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        var mobile = api.pageParam.mobile;
    }
    // mui遮罩
    var mask = mui.createMask(hidePicker);

    // 关闭遮罩
    function hidePicker(){
        $(".sharePicker").removeClass("pickAnimate");
        mask.myclose();
    }
    //弹出分享
    function share(){
        mask.show();
        $(".sharePicker").addClass("pickAnimate");
    }
    function showCounty(obj)
    {
        var type=$(obj).attr("data-type");
        if(type=="hide"){
            $(obj).attr("data-type","show");
            $(".countyCity").css({"display":"block"});
            $(obj).addClass("countyShow");

        }else{
            $(obj).attr("data-type","hide");
            $(".countyCity").css({"display":"none"});
            $(obj).removeClass("countyShow");
        }
        var indexedList = new auiIndexedList(getOtherHeight());
    }
    function getOtherHeight() {
        return $(".otherCity").height();
    }
    var indexedList = new auiIndexedList(getOtherHeight());
</script>
</html>
